<template>
  <div class="box">
    <div class="left">
      <div class="avatarBox">
        <div class="avatar">
          <el-avatar
            style="width: 0.7rem; height: 0.7rem; cursor: pointer"
            src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F0fbd54b2-0c56-4870-b041-aa37e6fc4491%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1711078965&t=8458f83339e3979691cb436ee449e943"
          />
        </div>
        <h1>重庆大学</h1>
      </div>
      <div class="titleList">
        <ul>
          <li
            v-for="(item, index) in titleList"
            :key="index"
            @click="changeActiveLi(index, item.component)"
            :class="index == activeLi ? 'activeLi' : ''"
          >
            {{ item.name }}
          </li>
        </ul>
      </div>
    </div>
    <div class="right">
      <transition name="list">
        <component :is="currentComponent"></component>
      </transition>
    </div>
  </div>
</template>

<script setup lang="ts">
import institutionHomePage from "./components/institution-homePage.vue";
import institutionCompetitionRecord from "./components/institution-competitionRecord.vue";
import institutionTaskRecord from "./components/institution-taskRecord.vue";
import institutionMessageCenter from "./components/institution-messageCenter.vue";
import institutionSecuritySetting from "./components/institution-securitySetting.vue";
import institutionSubAccountSettings from "./components/institution-subAccountSettings.vue";
import institutionReviewManagement from "./components/institution-reviewManagement.vue";
import institutionUserManagement from "./components/institution-userManagement.vue";
import institutionProtocolManagement from "./components/institution-protocolManagement.vue";
import { ref,shallowRef } from "vue";
/**
 * 菜单列表
 */
const titleList = [
  {
    name: "首页",
    component: institutionHomePage,
  },
  {
    name: "大赛记录",
    component: institutionCompetitionRecord,
  },
  {
    name: "任务记录",
    component: institutionTaskRecord,
  },
  {
    name: "消息中心",
    component: institutionMessageCenter,
  },
  {
    name: "安全设置",
    component: institutionSecuritySetting,
  },
  {
    name: "子账号设置",
    component: institutionSubAccountSettings,
  },
  {
    name: "评审管理",
    component: institutionReviewManagement,
  },
  {
    name: "用户管理",
    component: institutionUserManagement,
  },
  {
    name: "协议管理",
    component: institutionProtocolManagement,
  },
];
/**
 * 菜单显示按钮
 */
const activeLi = ref(0);
/**
 * 初始化菜单首页
 */
let currentComponent = shallowRef(institutionCompetitionRecord);
/**
 * 切换菜单按钮
 */
const changeActiveLi = (index, component) => {
  activeLi.value = index;
  changeCom(component);
};
const changeCom = (component) => {
  currentComponent.value = component;
};
</script>

<style lang="scss" scoped>
.box {
  display: flex;
  .left {
    width: 10%;
    height: 100%;
    min-height: 4rem;
    .avatarBox {
      .avatar {
        display: flex;
        justify-content: center;
        margin-top: 0.15rem;
        margin-bottom: 0.08rem;
      }
      h1 {
        font-weight: bold;
        font-size: 0.1rem;
        text-align: center;
      }
    }
    .titleList {
      text-align: center;
      margin-top: 0.16rem;
      font-size: 0.09rem;
      font-weight: bold;
      line-height: 0.24rem;
      cursor: pointer;
      .activeLi {
        color: rgb(61, 154, 184);
      }
    }
  }
  .right {
    width: 90%;
    min-height: 4rem;
    border-left: 0.01rem solid rgb(187, 187, 187);
  }
}
.list-move, /* 对移动中的元素应用的过渡 */
.list-enter-active,
.list-leave-active {
  transition: all 0.5s ease;
}

.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: translateX(30px);
}

/* 确保将离开的元素从布局流中删除
  以便能够正确地计算移动的动画。 */
.list-leave-active {
  position: absolute;
}
</style>
